<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>看清梧桐树</title>
    <include file="./themes/default/portal/cssH.html"/>

    <style>
        .banner {
            display: block;
            width: 100%;
            height: auto;
        }

        .box .el-tabs__header {
            margin-bottom: 0px;
        }


        .box .el-card__body {
            padding: 0;
        }

        .c3 {
            color: #333;
        }

        .c9 {
            color: #999;
        }

        .c6 {
            color: #666;
        }

        .cover {
            margin-right: 5%;
        }

        .cover > img {
            width: 320px;
            height: auto;
        }

        .textData {
            padding-top: 20px;
        }

        .pagination {
            top: -19px;
            background-color: #fff;
            right: 0;
        }

        @media screen and (min-width: 950px) {
            .flext {
                flex: 1;
            }

            .wid {
                width: 160px;
            }

            .subList > div {
                width: 31.8%;
                margin-bottom: 25px;
                display: inline-block;
            }

            .subList > div:nth-child(3n-1) {
                margin-left: 2%;
                margin-right: 2%;
            }

            .padd {
                padding: 51px 0px;
            }

            .box-card {
                border: none;
                padding: 30px 40px;
            }

            .pagination {
                top: -19px;
                background-color: #fff;
                right: 0;
            }

            .titles {
                font-size: 36px;
            }

            .titles + div {
                font-size: 24px;
            }


            .f1n {
                font-size: 18px;
            }

            .cover > img {
                width: 320px;
                height: auto;
            }

        }

        @media screen and (max-width: 950px) {
            .padd {
                padding: 11px 0px;
            }

            .wid {
                width: 40%;
            }

            .f1n {
                font-size: 14px;
            }

            .pagination {
                top: 0;
                bottom: 0;
                background-color: #fff;
                left: 0px;
            }

            .box-card {
                border: none;
                padding: 20px 15px;
            }

            .cover > img {
                width: 100%;
                height: auto;
            }

        }

        .border {
            width: 100%;
            height: auto;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .liimg {
            height: auto;
            width: 100%;
        }

        .borderBr {
            width: 78px;
            height: auto;
        }

        .imgqr {
            width: 59px;
            height: auto;
        }

        .imgLi {
            width: 15px;
            height: 15px;
            margin-right: 3px;
        }

        .navs {
            margin-top: 20px;
            margin-bottom: 70px;
        }

        .border {
            height: 1px;
            background: #ccc;
            width: 100%;
            margin-top: 10px;
        }

        .border > div {
            top: 0;
            right: 0;
            height: 1px;
            width: 150px;
            background: #6884E3;
        }
    </style>
</head>
<body>
<div id="web">
    <include file="./themes/default/portal/phone.html"/>

    <div id="app">
        <include file="./themes/default/portal/header.html"/>

        <div>
            <img class="banner" src="__STATIC__/demo/img/cover7.png" alt="">
            <div class="navs">
                <div>
                    <div class="flex">
                        <!--    从哪些页进来的    -->
                        <div>
                            <div class="flex flex-align">
                                <img class="imgLi" src="/static/demo/img/d1.png" alt="">
                                <div class="f1n" @click="navigatorFun(0)">首页&nbsp;<i class="el-icon-arrow-right"></i>&nbsp;
                                </div>
                            </div>
                        </div>
                        <!--   在当前页的标题    -->
                        <div>
                            <div class="flex flex-align">
                                <img class="imgLi" src="/static/demo/img/d2.png" alt="">
                                <div class="f1n">看清梧桐树</div>
                            </div>
                        </div>
                    </div>
                    <!--   下边框   -->
                    <div class="border pr">
                        <div class="pa"></div>
                    </div>
                </div>
            </div>


            <el-tabs v-model="activeName" class="box" @tab-click="handleClick">
                <el-tab-pane label="小程序" name="first" class="flex padd">
                    <div class="subList">
                        <el-card class="flext wow zoomIn" :body-style="{ padding: '0px' }" :key="index"
                                 v-for="(item,index) in cardList">
                            <div class="flex flex-align" @click="goPage(5, item)"><img :src="item.image" class="liimg">
                            </div>
                            <div style="padding: 14px;" class="tc flex flex-align">
                                <img class="imgqr" @click="goPage(7, item)" v-if="item.qr" :src="'/upload/'+item.qr"
                                     alt="">
                                <div class="flex-sub tc" @click="goPage(5,item)">
                                    <div class="c3 f20 tc">{{item.title}}</div>
                                    <div class="flex flex-align"><img class="borderBr" src="/static/demo/img/bg1.png"
                                                                      alt=""></div>
                                    <div class="c6 tc f16">{{item.service_area}}</div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div v-show="!cardList" class="tc f14 c9 padd">暂无数据</div>
                </el-tab-pane>
                <el-tab-pane label="公众号" name="second" class="padd">
                    <div class="subList">
                        <el-card class="flext wow zoomIn" :body-style="{ padding: '0px' }" :key="index"
                                 v-for="(item,index) in cardList">
                            <div class="flex flex-align" @click="goPage(5, item)"><img :src="item.image" class="liimg">
                            </div>
                            <div style="padding: 14px;" class="tc flex flex-align">
                                <img class="imgqr" @click="goPage(7, item)" v-if="item.qr" :src="'/upload/'+item.qr"
                                     alt="">
                                <div class="flex-sub tc" @click="goPage(5,item)">
                                    <div class="c3 f20 tc">{{item.title}}</div>
                                    <div class="flex flex-align"><img class="borderBr" src="/static/demo/img/bg1.png"
                                                                      alt=""></div>
                                    <div class="c6 tc f16">{{item.service_area}}</div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div v-show="!cardList" class="tc f14 c9 padd">暂无数据</div>
                </el-tab-pane>
                <el-tab-pane label="APP" name="third" class="padd">
                    <div class="subList">
                        <el-card class="flext wow zoomIn" :body-style="{ padding: '0px' }" :key="index"
                                 v-for="(item,index) in cardList">
                            <div class="flex flex-align" @click="goPage(5, item)"><img :src="item.image" class="liimg">
                            </div>
                            <div style="padding: 14px;" class="tc flex flex-align">
                                <img class="imgqr" @click="goPage(7, item)" :src="'/upload/'+item.qr" alt="">
                                <div class="flex-sub tc" @click="goPage(5,item)">
                                    <div class="c3 f20 tc">{{item.title}}</div>
                                    <div class="flex flex-align">
                                      <img class="borderBr" src="/static/demo/img/bg1.png" alt=""></div>
                                    <div class="c6 tc f16">{{item.service_area}}</div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div v-show="!cardList" class="tc f14 c9 padd">暂无数据</div>
                </el-tab-pane>
                <el-tab-pane label="网站建设" name="fourth" class="padd">
                    <div class="subList">
                        <el-card class="flext wow zoomIn" :body-style="{ padding: '0px' }" :key="index"
                                 v-for="(item,index) in cardList">
                            <div class="flex flex-align" @click="goPage(5, item)"><img :src="item.image" class="liimg">
                            </div>
                            <div style="padding: 14px;" class="tc flex flex-align">
                                <img class="imgqr" @click="goPage(7, item)" v-if="item.qr" :src="'/upload/'+item.qr"
                                     alt="">
                                <div class="flex-sub tc" @click="goPage(5,item)">
                                    <div class="c3 f20 tc">{{item.title}}</div>
                                    <div class="flex flex-align"><img class="borderBr" src="/static/demo/img/bg1.png"
                                                                      alt=""></div>
                                    <div class="c6 tc f16">{{item.service_area}}</div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div v-show="!cardList" class="tc f14 c9 padd">暂无数据</div>
                </el-tab-pane>
            </el-tabs>
            <div style="height: 45px; width: 100%;" class="pr">
                <el-pagination
                        class="pa pagination dnAndb"
                        @size-change="handleSizeChange"
                        @current-change="handleSizeChange"
                        :current-page.sync="pag"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <div class="tr db flex flex-center">
                <el-button size="mini" @click="prev()">上一页</el-button>
                <el-button size="mini" @click="next()">下一页</el-button>
            </div>
            <div style="height: 30px" class="db"></div>
        </div>

    </div>

    <el-dialog
            width="40%"
            title="扫一扫"
            :visible.sync="dialogVisible">
        <div class="flex flex-align flex-center">
            <img style="max-width: 160px;margin: auto;" :src="url" alt="">
        </div>
    </el-dialog>
    <!--  尾  -->
    <include file="./themes/default/portal/footer.html"/>
  <input type="hidden" name="slideList" value='{$info}' id="slideList">

  <script>
        var app = new Vue({
            el: '#web',
            data: {
                show: false,
                navIndex: 3,
                navList: [{title: '网站首页', name: 'main', nav: []}, {title: '看见梧桐树', name: 'see', nav: []}, {
                    title: '看清梧桐树',
                    name: 'clearly',
                    nav: []
                }, {title: '看懂梧桐树', name: 'caseList', nav: []}, {title: '凤栖梧桐', name: 'contact', nav: []}],
                navLists: [
                    {title: '网站首页', name: 'main', nav: []},
                    {title: '看见梧桐树', name: 'see', nav: ['企业简介', '关于我们']},
                    {title: '看清梧桐树', name: 'clearly', nav: ['新闻资讯']},
                    {title: '看懂梧桐树', name: 'caseList', nav: ['小程序开发', '公众号开发', 'APP开发', '品牌网站']},
                    {title: '凤栖梧桐', name: 'contact', nav: ['品牌网站']}],

                // 手机端导航列表
                navList1: [
                    {
                        img: '/static/demo/img/nav7.png',
                        title: '小程序开发',
                        name: 'program'
                    },
                    {
                        img: '/static/demo/img/nav4.png',
                        title: 'APP开发',
                        name: 'development'
                    },
                    {
                        img: '/static/demo/img/nav6.png',
                        title: '公众号开发',
                        name: 'publicNumber'
                    },
                    {
                        img: '/static/demo/img/nav5.png',
                        title: 'PC/WAP建站',
                        name: 'build'
                    }
                ],
                dialogVisible: false,
                url: '',
                cardList: [],
                total: 0,
                pageSize: 10,
                pag: 1,
                activeName: 'first',
            },
            mounted: function () {

            },
            created: function () {
                var slideList = document.getElementById('slideList').value;
                var resSlideList = JSON.parse(slideList);
                console.log(resSlideList)
                this.cardList = resSlideList.caseList
            },
            methods: {
                goPage: function (index, item) {
                    switch (index) {
                        case 0:
                            window.location.href = "{:url('index/program')}"
                            break
                        case 1:
                            window.location.href = "{:url('index/development')}"
                            break
                        case 2:
                            window.location.href = "{:url('index/publicNumber')}"
                            break
                        case 3:
                            window.location.href = "{:url('index/build')}"
                            break
                        case 5:
                            if (item.url) {
                                console.log(item)
                                window.location.href = item.url
                                return
                            }
                            window.location.href = "{:url('index/caseDetail')}?id=" + item.id + "&name=" + item.title
                            break;
                        case 6:
                            window.location.href = "{:url('index/detail')}?id=" + item.id + "&name=" + item.title
                            break
                        case 7:
                            this.url = '/upload/' + item.qr
                            this.dialogVisible = true
                            break
                    }
                },
//      导航的跳转
                navigatorFun: function (index) {
                    switch (index) {
                        case 0:
                            window.location.href = "{:url('index/index')}"
                            break
                        case 1:
                            window.location.href = "{:url('index/see')}"
                            break
                        case 2:
                            window.location.href = "{:url('index/clearly')}"
                            break
                        case 3:
                            window.location.href = "{:url('index/caseList')}"
                            break
                        case 4:
                            window.location.href = "{:url('index/contact')}"
                            break
                    }
                },
                //选项卡
                handleClick: function () {
                    var _this = this;
                    _this.pag = 1
                    $.post("{:url('Index/caseList')}", {
                        page: _this.pag
                    }, function (data) {
                        var res = JSON.parse(data)
                        console.log(res)
                        _this.list = res.clearlyList[_this.activeName]
//          总条数
                        switch (_this.activeName) {
                            case 'first':
                                //              赋值小程序的列表
                                _this.total = res.clearlyList.first_count
                                break
                            case 'second':
                                //公众号
                                _this.total = res.clearlyList.second_count
                                break
                            case 'third':
                                //              app
                                _this.total = res.clearlyList.third_count
                                break
                            case 'fourth':
                                //              网站建设
                                _this.total = res.clearlyList.fourth_count
                                break
                        }
                    })
                },
                prev: function () {
                    var _this = this
                    _this.pag++
                    $.post("{:url('Index/caseList')}", {
                        page: _this.pag
                    }, function (data) {
                        var res = JSON.parse(data)
                        _this.list = res.clearlyList[_this.activeName]
                    })
                },
                next: function () {
                    var _this = this
                    _this.pag--
                    $.post("{:url('Index/caseList')}", {
                        page: _this.pag
                    }, function (data) {
                        var res = JSON.parse(data)
                        _this.list = res.clearlyList[_this.activeName]
                    })
                },
                handleSizeChange: function (val) {
                    var _this = this
                    _this.pag = val
                    $.post("{:url('Index/caseList')}", {
                        page: _this.pag
                    }, function (data) {
                        var res = JSON.parse(data)
                        _this.list = res.clearlyList[_this.activeName]
                    })
                },
            }
        })

    </script>
</html>